import React from "react";
import { useNavigate } from 'react-router-dom'
import { Card,Typography,Image  } from 'antd'
import './index.css'
import HtmlString from '../../components/html-string'
const { Title, Text } = Typography
const BlogCard = ({ item }) => {
    const navigate = useNavigate()
    const { title, content,author,publishdate, cover,newsid } = item
    const handleNavigateToDetails = () =>{
       navigate(`/blog/details?id=${ newsid }`)
    }
    const PREVIEW_URL = process.env.NODE_ENV  === 'development' ? process.env.REACT_APP_DEV_API_URL : process.env.REACT_APP_PRO_API_URL
    return (
        <div className="card-container">
            <Card
                onClick={handleNavigateToDetails}
                className="card-content"
                hoverable
                cover={<Image preview={false} alt="example" src={PREVIEW_URL + cover} />}
            >
                <Title className="title" title={title} level={5}>{ title }</Title>
                <div className="info">
                    <Text style={{ color: "#FFB516", marginRight: '10px'}}>{ author }</Text>
                    <Text>{ publishdate }</Text>
                    <HtmlString html={content} />
                </div>
            </Card>
        </div>
    )
}
export default BlogCard
